'use client'

import { forwardRef } from 'react'
import { PostCard } from './PostCard'
import { PostCardSkeleton } from './PostCardSkeleton'

interface Post {
  id: string
  title: string
  content: string
  images: string[]
  author: {
    name: string
    avatar: string
  }
  likes: number
  comments: number
  tags: string[]
  createdAt: string
}

interface MasonryGridProps {
  posts: Post[]
  loading: boolean
  hasMore: boolean
  containerRef: React.RefObject<HTMLDivElement>
}

export const MasonryGrid = forwardRef<HTMLDivElement, MasonryGridProps>(
  ({ posts, loading, hasMore, containerRef }, ref) => {
    return (
      <div className="max-w-7xl mx-auto">
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
          {posts.map((post, index) => (
            <PostCard key={post.id} post={post} index={index} />
          ))}
          
          {loading && (
            <>
              <PostCardSkeleton />
              <PostCardSkeleton />
              <PostCardSkeleton />
              <PostCardSkeleton />
            </>
          )}
        </div>
        
        {/* 加载更多触发器 */}
        <div ref={containerRef} className="h-10" />
        
        {!hasMore && posts.length > 0 && (
          <div className="text-center py-8 text-gray-500">
            已经到底啦～
          </div>
        )}
      </div>
    )
  }
)

MasonryGrid.displayName = 'MasonryGrid'
